<template>
  <div class="app-container">
    <MmvTitle title="违章费用明细"></MmvTitle>
    <el-table v-loading="loading" :data="settlementList" border >
      <el-table-column label="车牌号" align="center" prop="carNo"/>
      <el-table-column label="违章单据号" align="center" prop="documentNo">
        <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>违章时间: {{ scope.row.illegalTime }}</p>
          <p>违章地点: {{ scope.row.illegalLocation }}</p>
          <p>违章内容: {{ scope.row.illegalDetail }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.documentNo }}</el-tag>
          </div>
        </el-popover>
      </template>
      </el-table-column>
      <el-table-column label="罚款" align="center" prop="illegalFines"/>
      <el-table-column label="扣分" align="center" prop="pointsDeduction"/>
      <el-table-column label="违章手续费" align="center" prop="illegalPoundage"/>

      <el-table-column label="处理状态" align="center" prop="processingStatus">
        <template slot-scope="{row}">
                {{ {1:'未处理',2:'已处理未缴费',3:'已处理',4:'已缴费未处理'}[Number(row.processingStatus)] }}
            </template>
        </el-table-column>
      <el-table-column label="违章服务费" align="center" prop="deductions">
          <template slot-scope="{row}">
              <el-input placeholder="请输入" v-model="row.deductions" type="number"></el-input>
          </template>
      </el-table-column>
    </el-table>

    <MmvTitle title="违章处理"></MmvTitle>

    <el-row style="margin: 20px">
      <el-radio-group v-model="settlementMethod" style="width: 100%" :disabled="vehicleDamageTotal<=0">
        <el-radio :label="2">单独收费</el-radio>
        <el-radio :label="1" v-if="depositList.length>1">违章押金抵扣</el-radio>
        <el-radio :label="1" disabled v-else>押金抵扣<span style="color: red">(未支付违章押金)</span></el-radio>
      </el-radio-group>
    </el-row>
    <el-table :data="depositList" border v-if="settlementMethod==1">
      <el-table-column label="支付方式" prop="paymentMethod"></el-table-column>
      <el-table-column label="已付金额" prop="paidAmount"></el-table-column>
      <el-table-column label="抵扣金额">
        <template slot-scope="{row}">
          <span v-if="row.type==3">{{ supplementary }}</span>
          <el-input v-else v-model="row.deductionsAmount" placeholder="请输入金额" :disabled="vehicleDamageTotal<=0" @keyup.native="row.deductionsAmount= oninput(row.deductionsAmount,2,row.paidAmount)"></el-input>
        </template>
      </el-table-column>
    </el-table>

    <div class="footer">
      <el-button @click="OverDepositSettlement" type="primary">完成违章处理</el-button>
        <el-button @click="close">关闭</el-button>
    </div>
  </div>
</template>

<script>
  import {
    IllegalProcessing,
    OverIllegalDeposit
  } from '@/api/order/index';
  import MmvTitle from '@/components/MmvUI/MmvTitle.vue';
  export default {
    components: {
      MmvTitle
    },
    dicts: ['sys_pay_type', 'order_payStatus', 'charge_type'],
    props: ['orderNo'],
    data() {
      return {
        // orderNo: '13259c14b6f1483b9c1425e7413afad3',
        loading: true,
        btnLoadIng: false,
        settlementMethod: 2,
        depositList: [],
        settlementList: [],
      }
    },
    computed: {
      // 计算车损总和
      vehicleDamageTotal() {
        let total = 0
        this.settlementList.forEach(item => {
          total += Number(item.deductions)
        })
        return total.toFixed(2)
      },
      // 计算抵扣费用
      deduction() {
        let total = 0
        this.depositList.forEach(item => {
          if (item.type < 3) {
            total += Number(item.deductionsAmount)
          }
        })
        return total.toFixed(2)
      },
      // 计算补缴费用
      supplementary() {
        let total =  Number(this.vehicleDamageTotal - this.deduction).toFixed(2)
        this.depositList.forEach(item => {
          if (item.type == 3 ) {
            item.deductionsAmount =total
          }
        })
        return total<0?0:total
      }
    },
    watch: {
      deduction: function(val) {
        console.log(val,this.vehicleDamageTotal)
        if(Number(val)>Number(this.vehicleDamageTotal)){
          this.$message.error('抵扣费用不能大于车损费用总和')
        }
      }
    },
    mounted() {
      this.doDepositRefundDetail();
    },
    methods: {
      doDepositRefundDetail() {
        IllegalProcessing(this.orderNo).then(response => {
          this.settlementList = response.data.settlementList || [];
          this.depositList = response.data.depositList || [];
          this.loading = false
        });
      },
      /** 确认违章押金结算退款 */
      OverDepositSettlement() {
        for (let item of this.settlementList) {
          if (!item.deductions) {
            this.$message.error('费用不能为空')
            return;
          }
        }
        if (this.settlementMethod == 1 && this.deduction <= 0) {
          this.$message.error('押金抵扣费用为0,请选择单独缴费')
          return;
        }
        if (this.supplementary < 0) {
          this.$message.error('请检查押金抵扣金额')
          return;
        }
        this.submitBtnLoading = true

        OverIllegalDeposit({orderNo: this.orderNo, carIllegalList: this.settlementList, deductions: this.depositList, settlementMethod: this.settlementMethod}).then(response => {
          this.$message.success(response.msg)
          this.close()
        }).finally(err => {
          this.submitBtnLoading = false
        });;
      },
      close(){
        this.$emit('close');
      },
    },

  }
</script>

<style scoped="scoped">
  .mmv-title {
   margin: 0 !important;
   border-bottom: none !important;
  }
  .el-form-item {
      margin-bottom: 5px !important;
  }

  .el-table--medium .el-table__cell {
      padding: 3px !important;
  }

  .footer{
        text-align: end;
        padding-top: 20px;
  }
</style>
